<script setup>
import screenfull from 'screenfull'
import { ref } from 'vue'
import { useRouter } from 'vue-router';
const toggle = ref(false)
const color = [
  '#87ceeb',
  "#4c8045",
  '#c8161d',
  "#a6559d",
  "#e18a3b"
]
const getFullCreeen = () => {
  if (screenfull.isEnabled) {
    toggle.value = !toggle.value
    screenfull.toggle()
  }
}
const routes = ref([])
const router = useRouter()
routes.value = router.getRoutes()
</script>
<template>
    <dv-border-box11  v-if="true" title="项目信息大屏" :title-width="400" :animate="false" class="box-title">
      <div class="container">
        <div class="nav">
          <template v-for="(item, index) in routes" :key="index">
            <router-link v-if="item.name" :to='item.path'>
              <dv-button :border='"Border" + (index+1)' :color="color[index]" :font-color="color[index]">
               <span style="display: inline-block;width: 100px;font-size: 20px;"> {{item.name}}</span>
              </dv-button>
            </router-link>
          </template>
        </div>
        <div class="content">
          <RouterView></RouterView>
        </div>
        <div class="fullscreen" style="float: right;">
          <el-icon :size="30" @click="getFullCreeen">
            <FullScreen v-if="!toggle" />
            <Crop v-else />
          </el-icon>
        </div>
      </div>
    </dv-border-box11>
    <dv-loading v-else><span style="color: #fff;">Loading...</span></dv-loading>
</template>

<style lang='scss' scoped>
.box-title{
    background-image: url('@/assets/bg.png');
  background-size: cover;
  background-repeat: no-repeat;
}

.container {
  height: 1080px;
  width: 1920px;
  color: #fff;
  padding-top: 80px;
  position: relative;

  .nav {
    height: 50px;
    display: flex;
    justify-content: space-around;
    line-height: 50px;
    padding: 0 100px;
  }

  .content {
    height: calc(1080px - 140px);
    margin: 10px;
  }

  .fullscreen {
    position: absolute;
    top: 50px;
    right: 30px;
    cursor: pointer;
  }
}
::v-deep .dv-border-box-11-title{
  font-size: 30px;
  font-weight: 700;
}
</style>